 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper">   
        <el-col :span='24'>  

        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <div>
            <el-form-item label="用户名">
                <el-input v-model="searchForm.userName" style="width: 250px;" clearable></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="searchForm.status" style="width: 250px;" clearable>
                  <el-option
                          v-for="status in statuses"
                          :key="status.value"
                          :label="status.label"
                          :value="status.value">
                          </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 200px;">搜索</el-button>
          </el-form-item>
          </div>
          
        </el-form>
        </el-col>
      </el-row>

      <div class="table_container">
          <el-table
                v-loading="tableLoading"
                :data="orders"
                style="width: 100%">
                <el-table-column 
                    label="用户ID" 
                    prop="userId"
                    width="180">
                </el-table-column>
                <el-table-column 
                  label="用户名"
                  prop="userName" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="订单号"
                  prop="id"
                  width="100">
                </el-table-column>
                <el-table-column
                  property="gmtCreate"
                  label="充值时间"
                  width="180">
                </el-table-column>
                <el-table-column
                    label="金额"
                    width="100">
                    <template slot-scope="scope">
                        {{ (scope.row.orderAmount/100).toFixed(2)}}
                    </template>
                </el-table-column>
                <el-table-column 
                  label="状态"
                  width="180">    
                  <template slot-scope="scope">
                        {{ scope.row.status === 'CREATE' ? '未到账' : '已到账' }}
                    </template>              
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
          </div>
        </div>
    </el-main>
  </el-container>
</template>

<script>
    import {getAllOrder} from '@/api/order'

    export default {
      data () {
        return {
          searchForm: {
            userName: '',
            status: ''
          },
          statuses: [
            {
              value: 'CREATE',
              label: '未到账'
            }, {
              value: 'ENABLE',
              label: '已到账'
            }
          ],
          expresses: [],
          orders: [],
          editedRow: -1,
          status: '',
          tableLoading: false,
          currentPage: 1,
          limit: 20,
          total: 0,
        }
      },
      mounted () {
        // this.initData();
        this.refreshOrders()
      },
      methods: {
        
        async onSubmit () {
          const loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          try {
            let search = Object.assign(this.searchForm, {})
            Object.keys(search).forEach((key) => (search[key] == '') && delete search[key]);
            let result = await getAllOrder({
                ...search,
                pageIndex: this.currentPage,
                pageSize: this.limit,
                orderCode: '200101'
            })
            if (result.status === 200 && result.data.code === 200) {
                this.orders = result.data.data
                this.total = result.data.page.total
            } else {
              throw new Error('创建失败')
            }
          } catch (err) {
            // this.$message.error('价格创建失败')
            console.log(err)
          }
          loading.close()
        }, 

        async refreshOrders () {
        //   this.editedRow = -1
          this.tableLoading = true
          try {
            const result = await getAllOrder({
                    pageIndex: this.currentPage,
                    pageSize: this.limit,
                    orderCode: '200101'
                })
            if (result.status === 200 && result.data.code === 200) {
              this.orders = result.data.data
              this.total = result.data.page.total
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },

        handleSizeChange (size) {
        this.limit = size
        this.refreshOrders()
        },
        handleCurrentChange (page) {
          this.currentPage = page
          this.refreshOrders()
        },
      }
    }
</script>

 <style lang="less" scoped>
    @import '../../style/mixin';
    .main {
        margin: 0 30px;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }

    .table-row {
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
    }

    .table-cell {
        margin: 10px 20px;
        // min-height: 48px;
        // border-right-width: 1px;
        // border-right-color: #ebeef5;
        // border-right-style: solid;
    }

    .table-header {
        min-height: 48px;
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
        background: #f6f6f6;
    }
    .table-header-title {
        margin-left: 10px;
    }

</style>
